<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/header::common-head">
    <!--<#include "../common/header.html">-->
</head>

<body>
<!--边栏-->
<!--<#include "../common/nav.html">-->
<div th:replace="admin/common/nav::common-nav" ></div>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<style>
    .productorder table{
        display: none;

    }
    .productorder table thead{
        width:1250px;

    }
    .widthTh{
      width: 1250px;
    }

</style>

<div class="content-wrapper" style="width: auto">
    <div class="container" style="padding-left: 0px;max-width: 1500px">
        <div class="row clearfix" style="width: 1400px; padding-left: 0px">
            <div class="col-md-12 column" style="width: 1300px;">
                <div name="search" class="col-md-6 row-md-6">
                    <div class="input-group">
                        <button type="button" class="btn btn-lg active">订单编号</button>
                        <input class="form-control" type="text" placeholder="Search for..." id="search">
                        <span class="input-group-btn">
                                    <button class="btn btn-primary" type="button" id="enterSearch" onclick="searchOrder()">
                                        <i class="fa fa-search"></i>
                                    </button>
                                 </span>
                    </div>
                </div>
                <table class="table">
                    <thead>
                    <tr>
                        <th>
                            订单编号
                        </th>
                        <th>
                            总价
                        </th>
                        <th>
                            基础地址
                        </th>
                        <th>
                            详细地址
                        </th>
                        <th>
                            收货人
                        </th>
                        <th>
                            手机号
                        </th>
                        <th>
                            用户
                        </th>
                        <th>
                            创建时间
                        </th>
                        <th>
                            订单状态
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                            <tr class="success productorder" th:each="orderMasterVO:${orderMasterVOList}" >
                                <td th:text="${orderMasterVO.orderId}">

                                </td>
                                <td th:text="${orderMasterVO.orderPrice}">
                                </td>
                                <td th:text="${orderMasterVO.addressBase}">

                                </td>
                                <td th:text="${orderMasterVO.addressPlace}">

                                </td>
                                <td th:text="${orderMasterVO.addressName}">

                                </td>
                                <td th:text="${orderMasterVO.addressPhone}">

                                </td>
                                <td th:text="${orderMasterVO.userUsername}">
                                </td>
                                <td th:text="${orderMasterVO.orderDate}">
                                </td>
                                <td th:class="${orderMasterVO.orderId}" th:text="${orderMasterVO.orderStatus==1?'已下单未付款':orderMasterVO.orderStatus==2?'已付款未发货':orderMasterVO.orderStatus==3?'已发货未收货':orderMasterVO.orderStatus==4?'订单完成':'退款中'}">
                                </td>
                                <td th:if="${orderMasterVO.orderStatus==2}">
                                    <button type="button" class="btn active updateOrderStatus" th:name="${orderMasterVO.orderId}" th:value="${orderMasterVO.orderStatus+1}">发货</button>
                                    <button type="button" class="btn active orderDetails"  th:value="${orderMasterVO.orderId}" onclick="disonTo(this)">订单详情</button>
                                </td>
                                <td th:if="${orderMasterVO.orderStatus==5}">
                                    <button type="button" class="btn active updateOrderStatus" th:name="${orderMasterVO.orderId}" th:value="${orderMasterVO.orderStatus - 1}">退款</button>
                                    <button type="button" class="btn active orderDetails"  th:value="${orderMasterVO.orderId}" onclick="disonTo(this)">订单详情</button>
                                </td>
                                <td th:if="${orderMasterVO.orderStatus==1||orderMasterVO.orderStatus==3||orderMasterVO.orderStatus==4}">
                                     <button type="button" class="btn active orderDetails"  th:value="${orderMasterVO.orderId}" onclick="disonTo(this)">订单详情</button>

                                </td>
                                <td class="orderDetail">
                                    <table  style="display: none;">
                                        <thead style="width: 1250px" >
                                        <tr class="widthTh" style="width: 1250px">
                                            <th>商品名称</th>
                                            <th>商品图片</th>
                                            <th>商品单价</th>
                                            <th>商品数量</th>
                                            <th>商品总价</th>
                                        </tr>
                                        </thead>
                                        <tbody th:id="${orderMasterVO.orderId}" style="width: 1250px">
                                        <tr th:each="orderDetail:${orderMasterVO.orderDetailVOList}">
                                            <td th:text="${orderDetail.productName}"></td>
                                            <td><img th:src="@{/admin/jpg/{imgName}(imgName=${orderDetail.imgName})}" style="width: 100px;height: 100px"/> </td>
                                            <td th:text="${orderDetail.productPrice}"></td>
                                            <td th:text="${orderDetail.productQuantity}"></td>
                                            <td th:text="${orderDetail.productTotal}"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                    </tbody>
                </table>
                <div style="width: 100%;">
                    <ul class="pagination pull-right pages" >
                        <li th:if="${pagenum<=1}" >
                            <a href="#" >Prev</a>
                        </li>
                        <li th:if="${pagenum>1}" >
                            <a th:href="@{/order/list/(pagenum=${pagenum}-1)}">Prev</a>
                        </li>

                        <li th:each="index:${#numbers.sequence(1,totalPage)}">
                            <a th:href="@{/order/list/(pagenum=${index})}"><span th:class="${index==pagenum?'active':''}" th:text="${index}"></span></a>
                        </li>

                        <li th:if="${pagenum==totalPage}">
                            <a href="#">Next</a>
                        </li>
                        <li th:if="${pagenum<totalPage}">
                            <a th:href="@{/order/list/(pagenum=${pagenum}+1)}">Next</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" type="text/css" media="screen" href="/fashionpress/admin/css/pagination.css">





    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function searchOrder() {
            var serch = document.getElementById("search");
            var url = "/fashionpress/order/selectOrderById/"+serch.value;
            window.location.href=url;

        }
        $(document).ready(function () {
            $(".updateProductStatus").click(function () {
                $msg = "您确定要执行此操作？"
                if (confirm($msg)==true)
                    return true;
                else {
                    return false;
                }
            })
            // $count = 1;
            // $(".orderDetails").click(function () {
            //
            //     //变更display的做法
            //     $table = this.parent().parent().next().children();
            //     if ($table.css("display")=="none"){
            //         $table.css("display","block");
            //     }
            //     else{
            //         $table.css("display","none");
            //     }
                //以前使用ajax的错误做法
                // $orderId = $(".orderDetails").attr("value");
                // if ($count%2==1){
                //     //获取table
                //     $table = $("#"+$orderId);
                //     //设置为显示
                //     $table.parent().css("display","block");
                //     //请求详情
                //     $.ajax({
                //         url: "/fashionpress/order/orderDetailList/" + $orderId,
                //         async: true,
                //         cache: true,
                //         dataType: "json",
                //         success: function (data) {
                //             console.log("data");
                //             console.log($count);
                //             console.log( $table.parent().css("display"))
                //             for(var i = 0; i<data.length; i++){
                //
                //                 $tr = $("<tr></tr>");
                //                 $tr.attr("class","success");
                //                 $tr.attr("id","tr"+$orderId);
                //
                //                 $tr.append("<td><span>"+data[i].productName+"</span></td>");
                //
                //                 $img = $("<img/>");
                //                 $img.attr("src","/fashionpress/admin/jpg/"+data[i].imgName+"");
                //                 $img.css("width","100px");
                //                 $img.css("height","100px");
                //                 $td1 = $("<td></td>");
                //                 $td1.append($img);
                //                 $tr.append($td1);
                //
                //                 $tr.append("<td><span>"+data[i].productPrice+"</span></td>");
                //
                //                 $tr.append("<td><span>"+data[i].productQuantity+"</span></td>");
                //
                //                 $tr.append("<td><span>"+data[i].productTotal+"</span></td>");
                //
                //                 $table.append($tr);
                //             }
                //         }
                //     })
                //     $count+=1;
                //
                // }
                // else{
                //     //第二次点击就删除这个元素
                //     $("#"+$orderId).parent().css("display","none");
                //     //删除tr里面的class 保证删除的正确性 删除class属性为tr+orderid的元素
                //     $("tr").remove("#tr"+$orderId);
                //
                //     $count+=1;
            //     // }
            // })

            //在修改订单状态时执行的函数
            $(".updateOrderStatus").click(function () {
                $msg = "您确定执行此操作？"
                if (confirm($msg)){
                    console.log(this);
                    $orderId = this.name;
                    $orderStatus = this.value;
                    $.ajax({url:"/fashionpress/order/updateOrderStatus/"+$orderId+"/"+$orderStatus,
                        async:true,
                        cache:true,
                        dataType:"text",
                        success: function (data,textStatus,jqXHR) {
                        //alert修改返回的字符串
                            alert(data);
                            //判断状态 改变值
                            if($orderStatus==3){
                                //修改字段
                                $("."+$orderId).text("已发货未收货");
                            }
                            if ($orderStatus==4){
                                $("."+$orderId).text("订单完成");
                            }
                            //使按钮隐藏
                                $("button[name='"+$orderId+"']").hide();


                        }})
                }

            })
        });
    </script>
    <script>
        function disonTo(obj) {
            var table = obj.parentElement.nextElementSibling.firstElementChild;
            if (table.style.display=="none"){
                table.style.display="block";
            }
            else{
                table.style.display="none";
            }

        }
    </script>
    <script>

        var websocket = null;
        //判断浏览器是否支持webscoket
        if ('WebSocket' in window) {

            websocket = new WebSocket("ws://localhost:8080/fashionpress/order/websocket");
        } else {
            alert('当前浏览器不支持websocket');
        }
        // <#--//设置返回的消息的方法-->
        // <#--function setMessageInnerHtml(innerHTML)-->
        // <#--{-->
        // <#--${'#message'}.innerHTML = innerHTML;-->
        // <#--}-->

        //连接发生错误的回调方法
        websocket.onerror = function () {
            console.log('Websockt连接发生错误');
        }

        //连接成功建立的回调方法
        websocket.onopen = function () {
            console.log('websocket连接成功');
        }
        //接收消息的回调方法
        websocket.onmessage = function (event) {
            console.log("收到消息" + event.data);

            //调用窗口
            if (confirm(event.data)){
                window.location.reload();
            }


        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log('连接关闭');
        }

        //监听事件的窗口，当窗口关闭，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会报异常
        window.onbeforeunload = function () {
            closeWebsocket();
        }

        //关闭连接
        function closeWebsocket() {
            websocket.close();

        }

    </script>

</div>
<div th:replace="admin/common/footer::common-footer"/>
</body>
</html>